<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.3 CSS3的颜色模式（2）-实例仿天猫商品展示效果</title>
    <style>

        body{
            background-color: #ddd;
        }
       #main{
           margin: 100px auto;
           width: 800px;
           clear: both;
       }

        #main li{
            float: left;
            background-color: #FFF;
            list-style: none;
            width:240px;
            padding: 1px;
            border: 1px solid rgba(255,0,0,0);
            cursor: pointer;
        }
        #main li:hover{
            border: 1px solid rgba(255,0,0,1);
        }
        #main li:hover .img img{
            transition: all .6s;
            opacity: 0.7;
        }
        .img img{
             width: 240px;

        }

        .goods_title{
            margin: 10px;
            color:#666;
            height: 35px;
            overflow: hidden;
        }

        .price{
            margin: 10px;
color: #F00;
        }

    </style>
</head>
<body>
  <div id="main">
         <ul>
             <li>
                 <div class="img">
                      <img src="./img/003.png">
                 </div>
                 <div class="goods_title">
                       Gigabyte/技嘉b85m-D3v ddr3台式机电脑主板升级到b85大板更强
                 </div>
                 <div class="price">
                        $499元
                 </div>
             </li>

             <li>
                 <div class="img">
                     <img src="./img/003.png">
                 </div>
                 <div class="goods_title">
                     Gigabyte/技嘉b85m-D3v ddr3台式机电脑主板升级到b85大板更强
                 </div>
                 <div class="price">
                     $499元
                 </div>
             </li>
             <li>
                 <div class="img">
                     <img src="./img/003.png">
                 </div>
                 <div class="goods_title">
                     Gigabyte/技嘉b85m-D3v ddr3台式机电脑主板升级到b85大板更强
                 </div>
                 <div class="price">
                     $499元
                 </div>
             </li>
         </ul>
  </div>
</body>
</html>